<style lang="less">
    @import '../../../styles/common.less';
</style>

<template>
    <div>
        <Card>
            <p slot="title">
                <Icon type="ios-person" />
                用户列表
            </p>
        <Row>
            <Input v-model="nameQuery" placeholder="请输入姓名..." style="width: 200px"/>
            <Input v-model="accountPhone" placeholder="请输入手机号码..." style="width: 200px"/>
            <Button @click="handleRead" type="primary" icon="search">搜索</Button>
            <Button @click="handleAdd">添加</Button>
            <modalForm :show="show">
                <div  slot="header" style="color:#f60;text-align:center;" >
                    <span>添加用户</span>
                </div>
                <userAdd slot="body"></userAdd>
            </modalForm>
        </Row>
        <Row class="margin-top-10 searchable-table-con1">
            <div class="edittable-table-height-con">
            <can-edit-table refs="users" v-model="records" @on-delete="handleDelete"
                            @on-change="handleUpdate"
                            :columns-list="columns"></can-edit-table>
            </div>
        </Row>
        <Row class="margin-top-10 searchable-table-con1">
            <Page :total="totalCount" :page-size="size" show-total @on-change="changePage"></Page>
        </Row>
        </Card>
    </div>
</template>

<script type="text/ecmascript-6">
    import api  from '../../../libs/api'
    import {eventBus}  from '../../../libs/eventBus'
    import userAdd from './user_add.vue'
    import canEditTable from '../../tables/components/canEditTable.vue';
    import modalForm from "../../my-components/modal-form/modalForm.vue"
    export default {
        name: 'user',
        components: {
            canEditTable,
            userAdd,
            modalForm
        },
        data () {
            return {
                show:false,
                records: [],
                current: 1,
                size: 10,
                nameQuery: '',
                accountPhone: '',
                totalCount: 0,
                totalPage: 0,
                columns: [
                    {
                        title: '用户名',
                        key: 'userName',
                        editable: false
                    },
                    {
                        title: '手机号码',
                        key: 'accountPhone',
                        editable: true
                    },
                    {
                        title: '姓名',
                        key: 'name',
                        editable: true
                    },
                    {
                        title: '创建时间',
                        key: 'createTime'
                    },
                    {
                        title: '更新时间',
                        key: 'updateTime'
                    },
                    {
                        title: '状态',
                        key: 'status',
                        editable:true,
                        type:"select",
                        option:{data:"statusEnums",key:"name",value:"code"}
                    },{
                        title: '角色',
                        key: 'userRoles',
                        editable:true,
                        type:"select",
                        option:{data:"roles",key:"role",value:"code"},
                        multiple:true,
                        filterable:true,
                    },
                    {
                        title: '组织机构',
                        key: 'userOrganizations',
                        editable:true,
                        type:"select",
                        option:{data:"organizations",key:"name",value:"code"},
                        multiple:true,
                        filterable:true,
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 200,
                        key: 'handle',
                        handle: ['edit', 'delete']
                    }
                ]
            }
        },
        mounted(){
            let self=this;
            eventBus.$on("freshenUserList",function () {
               self.handleRead();
            });
            eventBus.$on("closeModal",function () {
                self.show=false;
            })
        },
        methods: {
            handleRead(){
                let data = {};
                data.nameQuery = this.nameQuery;
                data.accountPhone = this.accountPhone;
                data.current = this.current;
                data.size = this.size;
                this.$get(api.users.base, data).then(response => {
                    this.totalPage = this.util.calTotalPage(response.obj.total, this.size);
                    this.totalCount = response.obj.total;
                    this.records = [];
                    for (let i in response.obj.records) {
                        this.records.push(response.obj.records[i])
                    }
                });
            },
            handleDelete (val, index) {
                this.$delete(api.users.base+"/"+val.id,null).then(response=>{
                    this.handleRead();
                });
            },
            handleUpdate (val, index) {
                delete val[index]["statusEnums"]; //删除枚举数据
                this.$put(api.users.base+"/"+val[index].id,val[index]).then(response=>{
                    this.handleRead();
                })
            },
            changePage(index){
                this.current = index;
                this.handleRead();
            },
            handleAdd: function() {
                this.show=true;
            }
        },
        created(){
            this.handleRead();
        }
    }
</script>

<style>

</style>
